<template>
	<gui-page ref="guipage" :apiLoadingStatus="apiLoadingStatus" :refresh="true" @reload="reload"
		 :loadmore="true" @loadmorefun="getData">
		<view slot="gBody" class="gui-flex1 gui-flex gui-columns">
		<view class="module">
			<view class="top">
				<view class="qtitle-line">
					<view style="background: #01A784;height: 42rpx;"></view>
					<text style="font-size: 32rpx;font-weight: bold;">佣金明细</text>
					<text style="padding-left: 32rpx;font-size: 32rpx;">10单</text>
				</view>
				<picker mode="selector" :range="monthList" @change="changeMonth" range-key="name">
					<view class="right">
						<text>{{monthList[monthIndex]?monthList[monthIndex].name:'选择'}}</text>
						<text class="gui-icons">&#xe603;</text>
					</view>
				</picker>
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="itemInfo">
						<view class="info">
							<text class="info_text1">{{item.title}}</text>
							<!-- <text class="info_text2">鞋子数量:{{item.shoeNum}}双</text> -->
						</view>
						<text class="money">订单号：{{item.orderNo}}</text>
					</view>
					<view class="time">{{item.createTime}}</view>
				</view>
			</view>
			<gui-empty v-if="noData">
				<view slot="img" class="gui-flex gui-rows gui-justify-content-center">
					<!-- 请根据您的项目要求制作并更换为空图片 -->
					<image class="gui-empty-img" src="../../static/noImg.png"></image>
				</view>
				<text slot="text" class="gui-text-small gui-block-text gui-text-center"
					style="color:#9DABFF;">暂无数据</text>
			</gui-empty>
		</view>
	</view>
	</gui-page>
</template>

<script>
	export default {
		data() {
			return {
				pageNum: 1,
				pageSize: 10,
				total: 1,
				pageLoading: false,
				// 用于记录是否有 api 请求正在执行
				apiLoadingStatus: false,
				noData: false,
				list: [],
				monthList:[], //筛选
				monthIndex:0,  //日期选中下标
			}
		},
		onLoad() {
			let month = Number(this.$u.now('array')[1]) 
			console.log(month);
			for (var i = 1; i < month; i++) {
				this.monthList.push({
					name: i+'月',
					value:i
				})
			}
			this.monthList.unshift({name:'本月',value:month})
			this.monthList.unshift({name:'本日',value:0})
			console.log(this.monthList);
			this.getData()
		},
		onPullDownRefresh() {  //页面下拉
			console.log('refresh');
			this.reload()
			uni.stopPullDownRefresh();
		},
		methods: {
			changeMonth(e){
				console.log(e.detail.value);
				this.monthIndex=e.detail.value
				this.pageNum=1
				this.getData()
			},
			getData(isReload) {
				this.apiLoadingStatus = true;
				console.log('加载函数运行，页码 : ' + this.pageNum);
				let month = this.monthList[this.monthIndex].value
				// 模拟 api 请求刷新数据
				this.$http.get('/api/worker/statistics', {
					month,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data);
						this.total = Math.ceil(res.data.total / this.pageSize);
						if (this.pageNum >= 2) {
							// 加载完成后停止加载动画
							this.$refs.guipage.stoploadmore();
							// 假定第3页加载了全部数据，通知组件不再加载更多
							// 实际开发由接口返回值来决定
							if (this.pageNum > this.total) {
								this.$refs.guipage.nomore();
							} else {
								this.list = this.list.concat(res.data.data);
							}
						} else { // 第一页 有可能是第一次加载或者刷新
							this.list = [];
							this.list = res.data.data;
							this.noData = res.data.data.length ? false : true;
							this.$refs.guipage.stoploadmore();
							this.$refs.guipage.setScrollTop(0)
							// 刷新
							if (isReload) {
								this.$refs.guipage.endReload();
							}
						}
						this.pageNum++;
						this.apiLoadingStatus = false;
			
					} else {
						this.$u.msg(res.data.msg)
					}
				})
			},
			reload: function() {
				this.pageNum = 1;
				this.getData(true);
			},
		}
	}
</script>

<style lang="less">
	.top{
		padding-top: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.right{
			font-size: 32rpx;
			color: #707070;
			.gui-icons{
				padding-left: 20rpx;
			}
		}
	}
	.module{
		padding: 0 32rpx;
		.list{
			margin-top: 32rpx;
			.item{
				box-shadow: 0rpx 3rpx 10rpx 2rpx rgba(0,0,0,.16);
				border-radius: 10rpx;
				background: #fff;
				padding: 32rpx;
				margin-bottom: 20rpx;
				.itemInfo{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.info{
						display: flex;
						flex-direction: column;
						.info_text1{
							font-size: 32rpx;
						}
						.info_text2{
							font-size: 24rpx;
							color: #333;
							margin-top: 5rpx;
						}
					}
					.money{
						font-size: 30rpx;
						font-weight: 700;
					}
				}
				.time{
					margin-top: 32rpx;
					color: #9D9D9D;
					font-size: 24rpx;
				}
			}
		}
	}
</style>
